<template>
  <div class="clsBox">
    <div v-for="(item, index) in fileList" :key="item.id" class="itemFile">
      <span class="file-list-item">
        <span class="serial-number"> {{ index + 1 }} </span>
        <span class="file-name"> {{ item.fileName }}</span>
      </span>
      <el-icon style="vertical-align: middle; margin-right: 15px">
        <ArrowRight />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";

const fileList = reactive([
  {
    id: "1",
    fileName:
      "浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.doc",
  },
  {
    id: "2",
    fileName:
      " 浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.pdf",
  },
  {
    id: "3",
    fileName:
      " 浙江省东阳市南市街道梨枫村矿地综合开发利用建筑用石料矿采矿权出让收益评估报告书.pdf",
  },
  {
    id: "4",
    fileName:
      "浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.doc",
  },
  {
    id: "5",
    fileName:
      "浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.doc",
  },
  {
    id: "6",
    fileName:
      "浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.doc",
  },
  {
    id: "7",
    fileName:
      "浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.doc",
  },
  {
    id: "8",
    fileName:
      "浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.doc",
  },
  {
    id: "9",
    fileName:
      "浙江省东阳市南市街道梨枫村矿地综合开发利用项目建筑用石料矿采矿权挂牌出让文件.doc",
  },
]);
</script>

<style lang="scss" scoped>
.clsBox {
  border: 1px solid rgb(206, 202, 202);
  height: 98%;
  width: 80%;
  margin: 0 auto;
  overflow-y: auto;
  .itemFile {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    margin-left: 3vw;
  }
  .file-list-item {
    .serial-number {
      padding: 6px 10px;
      border-radius: 50%;
      background: #1890ff;
      color: white;
      margin-right: 1vw;
    }
  }
  .itemFile:hover {
    cursor: pointer;
    background-color: #fff3e0;
  }
}
</style>
